<template>
  <div v-if="alignLine.enable && alignLine.show" class="ident-line-wp">
    <div class="ident-line x-line"
         :style="{ width: `${canvas.width}px`, top: `${alignLine.top}px` }"></div>
    <div class="ident-line x-line"
         :style="{ width: `${canvas.width}px`, top: `${alignLine.horizontal}px` }"></div>
    <div class="ident-line x-line"
         :style="{ width: `${canvas.width}px`, top: `${alignLine.bottom}px` }"
    ></div>
    <div class="ident-line y-line"
         :style="{ height: `${canvas.height}px`, left: `${alignLine.left}px` }"></div>
    <div class="ident-line y-line"
         :style="{ height: `${canvas.height}px`, left: `${alignLine.vertical}px` }"></div>
    <div class="ident-line y-line"
         :style="{ height: `${canvas.height}px`, left: `${alignLine.right}px` }"></div>
  </div>
</template>

<script>
  import { computed, defineComponent } from "vue";
  import { useStore } from "vuex";

  export default defineComponent({
    name: "align-line",
    setup() {
      const store = useStore();
      const alignLine = computed(() => store.state.design.alignLine);
      const canvas = computed(() => store.state.design.canvas);
      return {
        alignLine,
        canvas
      };
    }
  });
</script>

<style scoped lang="less">
  @import "../../../../style/theme/index.less";

  .ident-line {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    box-sizing: border-box;
  }

  .x-line {
    border-top: 1px dashed @border-color-5;
  }

  .y-line {
    border-left: 1px dashed @border-color-5;
  }
</style>
